<template>
  <div class="app-container">
    <div v-show="index === 'main'">
      <div class="tablebox">
        <div class="title-table">
          <span class="line"></span>
          <span>代办列表</span>
        </div>
        <el-form :model="queryParams" ref="queryForm" label-width="88px" class="mt10">
          <el-row :gutter="20" class="padding-search-area">
            <el-col :md="6" :sm="15">
              <el-form-item label="公司名称" prop="code">
                <el-input
                  v-model="queryParams.code"
                  placeholder="请输入公司名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="15">
              <el-form-item label="项目名称" prop="name">
                <el-input
                  v-model="queryParams.name"
                  placeholder="请输入项目名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>

            <el-col :md="6" :sm="15">
              <el-form-item label="采购类型" prop="latitude">
                <el-input
                  v-model="queryParams.latitude"
                  placeholder="请输入采购类型"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="15">
              <el-form-item label="代办类型" prop="longitude">
                <el-input
                  v-model="queryParams.longitude"
                  placeholder="请输入代办类型"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="15">
              <el-form-item label="申请部门" prop="longitude">
                <el-input
                  v-model="queryParams.longitude"
                  placeholder="请输入申请部门"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="15">
              <el-form-item label="接受时间起" prop="longitude">
                <el-input
                  v-model="queryParams.longitude"
                  placeholder="请输入接受时间起"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="15">
              <el-form-item label="接受时间止" prop="longitude">
                <el-input
                  v-model="queryParams.longitude"
                  placeholder="请输入接受时间止"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">分配</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">转发</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">展缓处理</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">No Po 关闭</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">PR 关闭</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">重新打开</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini">退回</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          border
          class="mt10"
          style="width: 100%;margin-top:10px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column prop="no" label="采购申请单号" width="180" align="center">
            <template slot-scope="scope">
              <el-link @click="LookDetail(scope.row)" style="color: #409eff">{{ scope.row.no }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="RFQ编号" width="180" align="center"></el-table-column>
          <el-table-column prop="address" label="公司名称" align="center"></el-table-column>
          <el-table-column prop="address" label="申请部门" align="center"></el-table-column>
          <el-table-column prop="address" label="申请人" align="center"></el-table-column>
          <el-table-column prop="address" label="项目名称" align="center"></el-table-column>
          <el-table-column prop="address" label="采购类型" align="center"></el-table-column>
          <el-table-column prop="address" label="品类" align="center"></el-table-column>
          <el-table-column prop="address" label="代办事项" align="center"></el-table-column>
          <el-table-column prop="address" label="接受时间" align="center" width="180"></el-table-column>
          <el-table-column prop="address" label="计划时间" align="center" width="180"></el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            :current-page="4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 明细DOM -->
    <div v-show="index === 'detail'">
      <el-page-header @back="index = 'main'" :content="detailRow.moveNo" />
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="never" :body-style="{ padding: '10px' }">
            <div slot="header" class="detailTop">
              <span>基本信息</span>
            </div>
            <el-descriptions class="margin-top" :column="3" border>
              <el-descriptions-item>
                <template slot="label">标题</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请编号</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人公司</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人部门</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人联系电话</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人日期</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人邮箱</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">采购分类</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请分类</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">是否项目</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">项目号</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">客户/品牌</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">期望合同期间</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">是否单一采购</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">是否时候采</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">汇率</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">币种</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请人民币金额</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请原金额</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">单一供应商推荐</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">单一供应商原因说明</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">申请事由</template>
                {{ detailRow.moveNo }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :span="24" class="mt20">
          <detail ref="detail"></detail>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import detail from "./detail.vue";
export default {
  name: "procurement",
  components: { detail },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      tableData: [
        {
          no: "12312312321"
        }
      ],
      detailRow: {},
      index: "main"
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 详情
    LookDetail(row) {
      const id = row.id;
      // getMoveLpnInfo(id).then(response => {
      this.detailRow = Object.assign(row);
      this.index = "detail";
      this.$nextTick(() => {
        this.$refs.detail.getList(row);
      });
      // });
    },
    handleQuery() {},
    resetQuery() {},
    handleSelectionChange() {}
  }
};
</script>

<style lang="scss">
.tablebox {
  .title-table {
    display: flex;
    align-items: center;
    .line {
      width: 5px;
      height: 20px;
      background-color: #409eff;
      margin-right: 10px;
    }
  }
}
</style>